<script lang="ts">
import {defineComponent, PropType} from 'vue'

export interface BlockData {
  text: string;
  pressed?: boolean;
  boom?: boolean;
}

export default defineComponent({
  name: 'Block',
  props: {
    modelValue: {type: Object as PropType<BlockData>, required: true},
    onLeftClick: Function,
    onRightClick: Function,
  },
  methods: {
    onClick() {
      this.onLeftClick?.();
    },
    onContextMenu() {
      this.onRightClick?.();
    }
  }
})
</script>

<template>
  <button
      :class="{
        block: true,
        pressed: modelValue.pressed,
        normal: !modelValue.pressed,
        boom: modelValue.boom
      }"
      :disabled="modelValue.pressed"
      @click="onClick"
      @contextmenu.prevent="onContextMenu">
    {{ modelValue.text }}
  </button>
</template>

<style scoped>
.block {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  font-weight: bold; /* 加粗文本 */
  font-size: 20px; /* 设置字体大小为20像素 */
}

.block.normal {
  background-color: #ccc;
  border: outset;
}

.block.pressed {
  background-color: #eee;
  border: solid;
}

.block.boom {
  background-color: #f00;
}
</style>